<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../depends/element.css" />
</head>
<body>

<div id="app" >

    <el-form>
        <el-form-item>
            <el-input v-model="value"></el-input>
        </el-form-item>
        <el-form-item>
            <el-select readonly v-model="select">
                <el-option label="A" value="a"></el-option>
                <el-option label="B" value="b"></el-option>
            </el-select>
        </el-form-item>
    </el-form>
</div>


<script src="../depends/vue@2.7.16.js"></script>
<script src="../depends/element-ui.js"></script>

<script>
    new Vue({
        el: '#app',
        mounted() {
            console.log('aa')
            let inputs = document.querySelector('#app').querySelectorAll('input');
            console.log('inputs', inputs)
            inputs.forEach(f => {
                console.log('f', f)
                f.readOnly = true
            })
        },
        data() {
            return {
                value: 'str',
                select: 'a',
            }
        }
    })
</script>
</body>
</html>
